<extend name="template/base_index" />

<block name="area_header">

    <link rel="stylesheet" href="__CSS__/add_good.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/mobile-select-area.css">
    <script type="text/javascript" src="__JS__/dialog.js"></script>
    <script type="text/javascript" src="__JS__/mobile-select-area.js"></script>
</block>

<block name="area_body">
    <div class="common_head">
        <a href="{:U('Index/index')}"><i class="fa fa-chevron-left"></i></a>
    </div>
    <form id="good_info" action="{:U('User/add_good')}" method="post" enctype="multipart/form-data">
        <div class="weui_cells_title"><input class="weui_input" type="text" placeholder="商品名称" name="name"></div>
        <div class="weui_cells">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea class="weui_textarea" placeholder="用几句话描述你的宝贝......" rows="3" name="synopsis"></textarea>
                </div>
            </div>
            <div class="fb-imgcontent">
                <ul id="img_ul">
                    <li><img src="__IMG__/addimg.png" onclick="img_input.click();" width="60px" height="60px">
                        <input type="file" id="img_input" multiple style="display:none" name="wxshop[]"></li>
                </ul>
            </div>
        </div>
        <div class="weui_cells weui_cells_access">
            <a class="weui_cell" href="javascript:;">
                <div class="weui_cell_hd"><label class="weui_label">价格：</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" placeholder="请输入价格" name="price">
                </div>
            </a>
            <a class="weui_cell" href="javascript:;">
                <div class="weui_cell_hd"><label class="weui_label">原价：</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" placeholder="请输入价格" name="ori_price">
                </div>
            </a>
            <a class="weui_cell" href="javascript:;">
                <div class="weui_cell_hd"><label class="weui_label">邮费：</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="number" placeholder="请输入邮费" name="postage">
                </div>
            </a>
            <a class="weui_cell" href="javascript:;">
                <div class="weui_cell_hd"><label class="weui_label">分类：</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" id="txt_area2" type="text" value="" name="cate_list">
                    <input  type="hidden" value="" name="cate_id">
                </div>
            </a>
            <a class="weui_cell" href="javascript:;">
                <div class="weui_cell_hd"><label class="weui_label">货源：</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" placeholder="请输入货源" name="dt_origin_country">
                </div>
            </a>
        </div>
        <div class="fa-button">
            <a  class="weui_btn weui_btn_warn" onclick="submit_form()">确定发布</a>
        </div>
    </form>
    <!--进度条显示-->
    <div class="weui_mask weui_mask_visible">
        <div class="weui_progress">
            <div class="weui_progress_bar">
                <div class="weui_progress_inner_bar js_progress" style="width: 0%;"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //级联分类


        $(function() {
            $('#img_input').change(function() {
                //图片上传限制在6张
                var count = $("[name = 'img_list[]']").length;
                if((count + 1) >= 7){
                    alerttip("上传图片过多 最多6张");
                }else{
                    var file = this.files[0];
                    $('.weui_mask').css('visibility','visible');
                    $.ajax({
                        url: "{:U('Home/Files/uploadUserPicture')}",
                        type: 'POST',
                        cache: false,
                        data: new FormData($('#good_info')[0]),
                        processData: false,
                        contentType: false,
                        xhr: function(){        //这是关键  获取原生的xhr对象  做以前做的所有事情
                            var xhr = jQuery.ajaxSettings.xhr();
                            xhr.upload.onprogress = function (ev) {
                                var loaded = ev.loaded;
                                var tot = ev.total;
                                var per = Math.floor(100*loaded/tot);
                                var widthval = per+'%';
                                $('.weui_progress_inner_bar').css('width',widthval);
                            }
                            return xhr;
                        }
                    }).done(function(res) {
                        console.log(res);
                        if(res['status'] != 0){
                            $('.weui_mask').css('visibility','hidden');
                            for(var key in res['list']){
                                $('#img_ul').prepend('<li><img class="float_close" src="__IMG__/delete.png" width="15px"><img src="' + res['list'][key]['imgurl'] + '" class="wholeimg" alt="'+res['list'][key]['id']+'" width="60px" height="60px"/><input type="hidden" value="' + res['list'][key]['id'] + '" name="img_list[]"></li>');
                            }
                            //图片删除
                            $(".float_close").bind("click", function() {
                                var imgIds = $(this).next().attr('alt');
                                var arr = $(this).parent();
                                $.get("{:U('Home/File/del_nowupload')}",{imgIds:imgIds},function (data){
                                    if(data){
                                        arr.remove();
                                    }
                                });
                            });

                            /*增加一个图片预览效果*/
                            $('.wholeimg').bind('click',function(){
                                var imgurl = $(this).attr('src');
                                $('#imgbox').attr('src',imgurl);
                                $('.weui-photo-browser-modal').show(200);
                            });
                        }else{
                            alerttip(res['info']);
                        }

                    }).fail(function(res) {
                        alerttip("上传图片失败a");
                    });
                }

            });

            /*图片预览关闭*/
            $('#closeimg').bind('click',function(){
                $('.weui-photo-browser-modal').hide(200);
            });

        });


        function submit_form(){
            if($("[name='name']").val() == '' || $("[name='synopsis']").val() =='' || $("[name='price']").val() == '' || $("[name='ori_price']").val() == ''|| $("[name='postage']").val() =='' || $("[name='dt_origin_country']").val() == '' || $("[name='cate_list']").attr('data-value') == '' || $("[name='img_list[]']").val() == ''){
                alerttip("有数据没填或有误");
            }else if($("[name='synopsis']").val().length > 150){
                alerttip("描述文字太多 请控制在150字内 :)");
            }else{
                $("[name='cate_id']").val($("[name='cate_list']").attr('data-value')) ;
                $('#good_info').submit();
            }
        }

        function alerttip(tipcontent){
            $('body').append('<div class="weui_toptips bg-error weui_toptips_visible" style="display: block;">'+ tipcontent +'</div>');
            window.setTimeout("$('.weui_toptips').remove();",2000);
        }
    </script>
    <div class="footermenu">
        <ul>
            <li><center><a href="{:U('Home/Index/index')}"><img src="__IMG__/indeximg.png" width="30px" height="30px"><p>首页</p></a></center></li>
            <li><center><a href="{:U('Home/User/add_good')}" class="add_good"><img src="__IMG__/addgood.png" width="20px" height="20px"><p>发布</p></a></center></li>
            <li><center><a href="{:U('Home/UserCenter/index')}"><img src="__IMG__/userimg.png" width="30px" height="30px"><p>个人中心</p></a></center></li>
        </ul>
    </div>

    <!--以下是图片预览的box-->
    <div class="weui-photo-browser-modal" style="display: none;">
        <i class="fa fa-close" id="closeimg"></i>
        <img src="" id="imgbox">
    </div>
</block>